<template>
  <div id="app">
    <div>
      <MyTitle>
        <template #header>
          <div class="title">
            本周热搜 TOP5
          </div>
        </template>
      </MyTitle>
      <MyContent :value="hotSearchItems">
        <template #content>
          <div class="content">
            <div class="item" v-for="(item, index) in hotSearchItems" :key="index">
              <span class="text">{{ item.title }}</span>
              <span>
                <img src="~@/assets/hot.png" alt="">
                <span style="margin-left: 5px;">{{ item.value }}</span>
              </span>
            </div>
          </div>
        </template>
      </MyContent>
    </div>
    <div>
      <MyTitle>
        <template #header>
          <div class="head">
            <span>可能感兴趣的人</span>
            <span>换一批</span>
          </div>
        </template>
      </MyTitle>
      <MyContent :value="people">
        <template #content>
          <div class="people">
            <div class="it" v-for="(item, index) in people" :key="index">
              <div class="left">
                <span class="text">{{ item.name }}</span>
                <span>{{ item.age }}岁</span><br>
                <span>{{ item.field }}</span><br>
                <span>{{ item.school }}</span>
              </div>
              <div class="right">
                <button>关注</button>
              </div>
            </div>
          </div>
        </template>
      </MyContent>
    </div>
  </div>
</template>

<script>
import MyContent from './components/MyContent.vue';
import MyTitle from './components/MyTitle.vue';



export default {
  name: 'App',
  components: {
    MyTitle,
    MyContent
  },
  data() {
    return {
      hotSearchItems: [
        { title: '#区块链', value: 96 },
        { title: '#数据挖掘', value: 91 },
        { title: '#无人机', value: 87 },
        { title: '#生命科学', value: 72 },
        { title: '#传感器', value: 60 },
      ],
      people: [
        { name: '李国盛', age: 52, field: '机电一体化技术', school: '哈尔滨工业大学', title: '教授' },
        { name: '陈颖', age: 36, field: '人工智能', school: '清华大学', title: '副教授' },
      ],
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: #fff;
  padding: 0 20px;
  background-color: #00adff;
  border-radius: 5px;
}

.title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: #fff;
  padding: 0 20px;
  background-color: #00adff;
  border-radius: 5px;
}

.content {
  background-color: #fff;
  padding: 0 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f4f6fa;
  flex: 1;
  height: 40px;
}

.item .text {
  background-color: #f5f6fa;
}

.item img {
  width: 16px;
  height: 16px;
}

.item:first span {
  width: 40px;
}

.people {
  width: 100%;
}

.people .it {
  position: relative;
  width: 80%;
  height: 60px;
}

.people .it .left {
  margin-top: 15px;
  padding-left: 20px;
  padding-top: 15px;
  width: 100%;
}

.people .it .left span {
  font-size: 15px;
  margin-left: 15px;
  margin-top: 30px;
  color: #989ca1;
}

.people .it .left .text {
  font-size: 18px;
  color: black;
}

.people .it .right {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #f5f6fa;
  right: -50px;
  top: 25px
}
</style>
